<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>

	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<title>登录</title>

	<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
	<link th:href="@{/font-awesome/css/font-awesome.css}" rel="stylesheet">

	<link th:href="@{/css/animate.css}" rel="stylesheet">
	<link th:href="@{/css/style.css}" rel="stylesheet">
	<style type="text/css">
		.book {
			font-size: 100px !important;
		}
	</style>
</head>

<body class="gray-bg">

<div class="middle-box text-center loginscreen animated fadeInDown">
	<div>
		<div>

			<h1 class="logo-name book">Book</h1>

		</div>
		<h3>欢迎进入</h3>
		<p>进入图书管理系统</p>
		<form class="m-t" role="form" action="/custom/login" method="post">
			<div class="form-group">
				<input type="text" name="username" class="form-control" placeholder="用户名" required="">
			</div>
			<div class="form-group">
				<input type="password" name="password" class="form-control" placeholder="密码" required="">
			</div>
			<button type="submit" class="btn btn-primary block full-width m-b">登录</button>

			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10">
					<img src="/custom/getCode" id="codeImg" onclick="refresh()" alt="">
				</div>
			</div>
			<a href="#"><small>忘记密码?</small></a>
			<p class="text-muted text-center"><small>没有账户?</small></p>
			<a class="btn btn-sm btn-white btn-block" href="/registerPage">创建账户</a>
		</form>
	</div>
</div>

<!-- Mainly scripts -->
<script th:src="@{/js/jquery-2.1.1.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script>
	/* 刷新验证码 */
	function refresh() {
		document.getElementById("codeImg").src = "/custom/getCode?time=" + new Date().getTime();
	}
</script>
</body>

</html>
